<template>
  <div class="ratingselect">
    <div class="rating-type">
        <span class="block positive" :class="{'active':selectType===2}" @click="select(2,$event)">{{desc.all}}<span class="count">{{rating.length}}}</span></span>
        <span class="block positive" :class="{'active':selectType===0}" @click="select(0,$event)">{{desc.positive}}<span class="count">{{positives.length}}}</span></span>
        <span class="block negative" :class="{'active':selectType===1}" @click="select(1,$event)">{{desc.negative}}<span class="count">{{negative.length}}}</span></span>    
    </div>    
    <div class="switch" :class="{'on':onlyContent}">
        <i class="icon-check_circle" @click='toggleContent($event)'></i>
        <span class="text">只看有内容的评价</span>
    </div>
  </div>  
</template>

<script>

const POSITIVE  = 0
const NEGATIVE  = 1
const ALL = 2

export default {
  props:{
      rating:{
           type:Array,
      default(){
          return []
      }
      },
     
      selectType:{
          type:Number,
          default:ALL
      },
      onlyContent:{
          type:Boolean,
          default:false
      },
      desc:{
          type:Object,
          default(){
              return {
                  all: '全部',
                  positive:'满意',
                  negative:'不满意'  
              }
          }
      }
  },
  computed:{
      positives(){
          return this.rating.filter((rating)=>{
              return rating.rateType ===POSITIVE
          })
      },
      negative(){
          return this.rating.filter((rating)=>{
              return rating.rateType ===NEGATIVE
          })
      }
  },
  methods:{
      select(type,event){
          this.$emit('ratingtype',type)
      },
      toggleContent(event){
          this.$emit('toggle', !this.onlyContent)
      }
  }
}
</script>

<style lang="stylus" scoped>
    .ratingselect
        .rating-type
            padding 18px 18px
            // margin 0 18px
            border-bottom 1px solid rgb(7,17,27)
            .block
                display inline-block
                padding 8px 12px
                border-radius 1px
                margin-right 8px
                line-height 16px                
                font-size 12px
                color rgb(77,85,93)
                &.active
                    color #fff
                .count
                    margin-left 2px
                    font-size 8px
                &.positive
                    background-color rgba(0,160,220,0.2)
                    &.active
                        background-color rgba(0,160,220,1)
                &.negative
                    background-color rgba(77,85,93,0.2)
                    &.active
                        background-color rgba(77,85,93,1)
                        
        .switch
            padding 12px 18px 
            line-height 24px
            border-bottom 1px solid rgba(7,17,27,0.1)
            color rgb(147,153,159)
            font-size 0
            &.on
                .icon-check_circle
                    color #00c850
            .icon-check_circle
                display inline-block
                vertical-align  top
                margin-right 4px
                font-size 24px
            .text
                display inline-block
                vertical-align  top
                font-size 12px  
</style>


